import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section2Image from '@/assets/images/project-operation/section2-image.webp'
import section2Li1 from '@/assets/images/project-operation/section2-li1.webp'
import section2Li2 from '@/assets/images/project-operation/section2-li2.webp'
import section2Li3 from '@/assets/images/project-operation/section2-li3.webp'
import section3Image from '@/assets/images/project-operation/section3-image.webp'
import section3Li1 from '@/assets/images/project-operation/section3-li1.webp'
import section3Li2 from '@/assets/images/project-operation/section3-li2.webp'
import section3Li3 from '@/assets/images/project-operation/section3-li3.webp'
import yesIcon from '@/assets/images/project-operation/yes.svg'

export const Route = createFileRoute('/_no-auth/project-operation/')({
  component: Text,
})

function Text() {
  const section2List = [
    {
      id: 0,
      motionProps: {
        initial: { opacity: 0, x: -80 },
        whileInView: { opacity: 1, x: 0 },
        transition: { duration: 1 },
      },
      title: '技术介绍（1）',
      image: section2Li1,
      sectTitle: '脑控专注力',
      message1:
        '脑控专注力模块聚焦前额叶，当检测到大脑皮层功能密度，自动触发并生成大脑神经效能分析报告，转化为解决应用方案。',
      message2:
        '该模块以前额叶脑电信号为核心，融合实时神经感知与AI分析识别顶叶功率密度变化，精准评估专注维持能力与神经调控效率。系统依据分析结果生成个性化服务方案，助力注意力提升与(BTC)认知行为训练。',
    },
    {
      id: 1,
      motionProps: {
        initial: { opacity: 0, y: 80 },
        whileInView: { opacity: 1, y: 0 },
        transition: { duration: 1 },
      },
      title: '技术介绍（2）',
      image: section2Li2,
      sectTitle: 'PSD-AI可视化情绪检测',
      message1:
        'PSD- AI可视化情绪检测模块通过导联EEG，运用自适应算法解析脑波功率谱密度生成动态检测行程报告，转化为解决应用方案。',
      message2:
        '该模块基于导联脑电信号，精准提取EEG关键脑波，通过AI算法动态分析功率谱密度，捕捉情绪波动特征。系统可实时呈现用户情绪状态，生成可视化报告，并提供个性化调节与服务方案。',
    },
    {
      id: 2,
      motionProps: {
        initial: { opacity: 0, x: 80 },
        whileInView: { opacity: 1, x: 0 },
        transition: { duration: 1 },
      },
      title: '技术介绍（3）',
      image: section2Li3,
      sectTitle: 'Brain AI智能手',
      message1:
        'Brain AI智能手臂通过传感接收中枢系统指令并将检测参数转化为脑控专注力与大脑综合协调力的测评报告，转化为解决应用方案。',
      message2:
        'Brain AI智能手臂将复杂的脑信号转译为可视化的认知能力模型，并针对注意力调控、认知灵活性、反应效率等关键维度，生成干预优化建议，为教育训练、心理素质建设及内驱力与神经反馈等应用场景提供科学支撑。',
    },
  ]
  const section3List = [
    {
      image: section3Li1,
      message: '男性体质、疲劳障碍',
      liList: [
        {
          title: '检测项目（GASF-动态检测）',
          description:
            '情绪压力、身体机能、炎症反应、与疲劳障碍：细胞生物检测 <br/>' +
            '机理：细胞线粒体氧化损伤、身体炎症反应、免疫机能调节',
        },
        {
          title: '适用特征（CFS-疲劳障碍）',
          description:
            '情绪神经、大脑疲劳、心肺气血、睡眠障碍、炎症免疫、生殖生理',
        },
        {
          title: '项目服务（CFS-稳态平衡调节）',
          description:
            'A：专项检测解读：脑电生物+细胞生物 <br/>' +
            'B：个性服务方案：专业报告+调节方案',
        },
      ],
    },
    {
      image: section3Li2,
      message: '女性体质、情绪障碍',
      liList: [
        {
          title: '检测项目（GASF-动态检测）',
          description:
            '情绪、神经、内分泌、免疫体制与疲劳障碍：细胞生物检测<br/>' +
            '机理：情绪应激与细胞线粒体氧化损伤、内分泌与免疫反应',
        },
        {
          title: '适用特征（CFS-疲劳障碍）',
          description:
            '大脑神经、情绪内分泌、睡眠障碍、心肺气血、炎症免疫、女性生理',
        },
        {
          title: '项目服务（CFS-稳态平衡调节）',
          description:
            'A：专项检测解读：脑电生物+细胞生物<br/>' +
            'B：个性服务方案：专业报告+调节方案',
        },
      ],
    },
    {
      image: section3Li3,
      message:
        '少年儿童：成长期情绪心理、<br class="lg:hidden"/>' +
        '生理体质、 <br class="hidden lg:block"/>学习认知',
      liList: [
        {
          title: '检测项目（GASF-动态检测）',
          description:
            '成长期（情绪体制） 学习疲劳与情绪内分泌免疫：细胞生物检测<br/>' +
            '成长期（学习优势） 大脑优势特征与学习认知近：细胞生物检测',
        },
        {
          title: '适用特征（CFS-疲劳障碍）',
          description:
            '情绪应激、心理生理、免疫功能、心智行为<br/>' +
            '大脑神经、天赋特征、认知技能、优势发展',
        },
        {
          title: '项目服务（CFS-稳态平衡调节）',
          description:
            'A：专项检测解读：脑电生物+细胞生物<br/>' +
            'B：个性服务方案：专业报告+调节方案',
        },
      ],
    },
  ]
  return (
    <div className={'layout_top min-h-screen overflow-hidden bg-[#FAFAFA]'}>
      {/*  section1 */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className={
          "layout relative bg-[url('@/assets/images/project-operation/section1-bg.webp')]" +
          ' 3xl:pt-[13.3rem] bg-cover bg-no-repeat pt-11 pb-1 lg:pt-[15rem] lg:pb-4' +
          " lg:bg-[url('@/assets/images/project-operation/section1-bg-pc.webp')]"
        }
      >
        <h1 className={'text-primary layout-h1 leading-line-1 font-bold'}>
          新佰时·
          <br className={'lg:hidden'} />
          项目运营
        </h1>
        <div
          className={
            'bg-primary 3xl:text-[3.5rem] leading-line-2 3xl:px-8 relative z-10 mt-2 inline-block font-extralight' +
            ' lg:px-3' +
            ' lg:text-4xl' +
            ' px-1' +
            ' text-xl' +
            ' text-white'
          }
        >
          <span className={'3xl:text-6xl font-bold lg:text-4xl'}>NBT </span>
          Project Operation
        </div>
        {/*line*/}
        <ul
          className={
            '3xl:space-y-20 absolute right-0 bottom-0 flex w-full flex-col items-end space-y-10' +
            ' lg:space-y-16'
          }
        >
          <li
            className={'bg-primary layout-left right-0 h-[0.125rem] lg:h-3'}
          ></li>
        </ul>
      </motion.div>
      {/*  section2 */}
      <div className={'layout 3xl:mt-28 mt-16 lg:mt-20'}>
        <motion.h2
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 1 }}
          className={'text-primary text-center font-bold'}
        >
          <span className={'layout-h2 leading-line-1'}>项目（1）</span>
          <br />
          <span className={'leading-line-1 3xl:text-5xl text-xl lg:text-4xl'}>
            CCBT 少年儿童-
            <br className={'lg:hidden'} />
            大脑优势发展与体质管理训练中心
          </span>
        </motion.h2>
        <p
          className={
            'leading-line-1 3xl:text-3xl 3xl:mb-28 text-text-65 mt-3 mb-8 text-center text-sm lg:mb-20' +
            ' lg:text-lg'
          }
        >
          本中心以脑科学与人工智能技术为核心，结合青少年儿童心理行为发展理
          <br />
          论，面向青少年少年儿童打造系统化的优势发展与身心协调管理体系
        </p>
        <div className={'rounded-8 overflow-hidden'}>
          <img src={section2Image} alt='技术介绍' />
        </div>
        <ul
          className={
            '3xl:mt-28 mt-10 space-y-10 lg:mt-20 lg:flex lg:items-start lg:justify-between'
          }
        >
          {section2List.map((item) => (
            <motion.li
              {...item.motionProps}
              key={item.id}
              className={'lg:w-[31%]'}
            >
              <div>
                <h3
                  className={
                    'text-primary leading-line-1 mb-5 text-center text-xl font-bold'
                  }
                >
                  {item.title}
                </h3>
                <img src={item.image} alt='image' />
                <div
                  className={
                    'rounded-b-[0.5rem] border-[0.03125rem] border-solid border-[#ECEBEF] bg-white p-6'
                  }
                >
                  <h4
                    className={'text-primary leading-line-1 text-xl font-bold'}
                  >
                    {item.sectTitle}
                  </h4>
                  <p
                    className={'leading-line-3 text-text-85 mt-6 mb-4 text-xs'}
                  >
                    {item.message1}
                  </p>
                  <p className={'leading-line-3 text-text-85 text-xs'}>
                    {item.message2}
                  </p>
                </div>
              </div>
            </motion.li>
          ))}
        </ul>
      </div>

      {/*  section3 */}
      <div className={'layout 3xl:py-28 py-16 lg:py-20'}>
        <motion.h2
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 1 }}
          className={'text-primary text-center font-bold'}
        >
          <span className={'layout-h2 leading-line-1'}>项目（2）</span>
          <br />
          <span className={'leading-line-1 3xl:text-5xl text-xl lg:text-4xl'}>
            M-SPA 自愈力健康管理（疲劳
            <br className={'lg:hidden'} />
            障碍情绪内分泌免疫调节）
          </span>
        </motion.h2>
        <p
          className={
            'leading-line-1 3xl:text-3xl 3xl:mb-28 text-text-65 mt-3 mb-8 text-center text-sm lg:mb-20' +
            ' lg:text-lg'
          }
        >
          脑电生物技术-细胞氧化反应平衡调节服务项目
          <br className={'lg:hidden'} />
          (疲劳障碍与大脑神经内分泌与免疫调节）
          <br />
          (S1)情绪内分泌免疫与疲劳障碍: GAS动态监测
          <br className={'lg:hidden'} />
          (S2) M-SPA数字化健康管理服务：CFS 平衡调节
          <br />
        </p>
        <div className={'rounded-8 overflow-hidden'}>
          <img src={section3Image} alt='脑电生物技术' />
        </div>
        <div className={'3xl:space-y-20 mt-10 space-y-10 lg:space-y-16'}>
          {section3List.map((item, i) => (
            <div
              key={item.message}
              className={`gap-20 lg:flex lg:items-center lg:justify-between ${i % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
            >
              <motion.img
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                transition={{ duration: 1 }}
                className={'rounded-8 h-full lg:w-[50%]'}
                src={item.image}
                alt={item.message}
              />
              <div className={'flex-1'}>
                <motion.h3
                  initial={{ scale: 1.1 }}
                  whileInView={{ scale: 1 }}
                  transition={{ duration: 0.5 }}
                  className={
                    'text-primary leading-line-1 3xl:text-3xl 3xl:mb-8 my-6 text-center text-xl font-bold lg:mt-0' +
                    ' lg:text-start' +
                    ' lg:text-2xl'
                  }
                  dangerouslySetInnerHTML={{ __html: item.message }}
                ></motion.h3>
                <ul className={'3xl:space-y-8 space-y-2 lg:space-y-6'}>
                  {item.liList.map((li) => (
                    <motion.li
                      initial={{ opacity: 0, x: i % 2 === 0 ? 80 : -80 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      transition={{ duration: 1 }}
                      className={
                        'border-text-1 rounded-8 border-[0.03125rem] border-solid p-6' +
                        ' flex items-start justify-start bg-white'
                      }
                      key={li.title}
                    >
                      <div className={'mr-2 pt-1'}>
                        <img src={yesIcon} alt='yesIcon' />
                      </div>
                      <div>
                        <h4
                          className={
                            'leading-line-1 3xl:text-xl mb-2 text-sm font-bold text-black lg:text-lg'
                          }
                        >
                          {li.title}
                        </h4>
                        <p
                          className={
                            'leading-line-1 text-text-85 3xl:text-base text-xs lg:text-sm'
                          }
                          dangerouslySetInnerHTML={{ __html: li.description }}
                        ></p>
                      </div>
                    </motion.li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
